<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浅蓝色主题风格-元素库-FreeUE轻松创建更加美观、规范的Web页面</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">
    <div class="inner">
        <div class="h-logo"><a href="index.html" title="FreeUE">FreeUE</a></div>
        <div class="h-account"><img src="images/head-default.jpg" alt="id"/> Hi，赫东！<a href="#">注销</a></div>
        <ul class="h-nav">
            <li><a href="index.html">首页</a></li>
            <li><a href="template.html">模板库</a></li>
            <li><a href="widget.html" class="active">元素库</a></li>
            <li><a href="begin.html">起步</a></li>
            <li><a href="about.html">关于</a></li>
        </ul>
    </div>
</div>
<div class="banner-widget"><img src="images/banner-widget.png" width="990" height="250" alt=""/></div>
<div class="clear"></div>
<div class="gray-box">
    <div class="inner">
        <dl class="main05 pt10">
            <dt>Metro主题风格元素库<a href="#" class="more"><i class="icon16 icon16-back"></i> 返回主题列表</a></dt>
            <dd>
                <div class="w220 fl">
                    <div class="widget-nav">
                        <ul>
                            <li><a href="#" class="active">按钮<i></i></a></li>
                            <li><a href="#">导航<i></i></a></li>
                            <li><a href="#">标签<i></i></a></li>
                            <li><a href="#">分页<i></i></a></li>
                            <li><a href="#">进度条<i></i></a></li>
                            <li><a href="#">搜索<i></i></a></li>
                            <li><a href="#">表格<i></i></a></li>
                            <li><a href="#">提示/浮层<i></i></a></li>
                            <li><a href="#">图表<i></i></a></li>
                            <li><a href="#">其他<i></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="w720 fr">
                    <div class="widget-item">
                        <div class="i-title">标题</div>
                        <div class="i-info">
                            在任何下拉菜单中均可通过添加标题来标明一组动作。在任何下拉菜单中均可通过添加标题来标明一组动作。在任何下拉菜单中均可通过添加标题来标明一组动作。在任何下拉菜单中均可通过添加标题来标明一组动作。在任何下拉菜单中均可通过添加标题来标明一组动作。
                        </div>
                        <div class="i-cont">
                            <div class="i-example">
                                <div class="example-tag">example</div>
                                <div class="pic"><img src="images/demo-680.jpg" width="680" height="40" alt=""/></div>
                            </div>
                            <div class="i-tab">
                                <ul>
                                    <li><a class="active" id="a1">html</a></li>
                                    <li><a id="a2">css</a></li>
                                    <li><a id="a3">js</a></li>
                                </ul>
                            </div>
                            <div class="i-code">
                                <div class="codearea">123</div>
                            </div>
                            <div class="i-btn"><a href="#" class="btn btn-blue">复制代码</a> <a href="#"
                                                                                            class="btn">运行代码</a></div>
                        </div>
                    </div>
                    <div class="widget-item">
                        <div class="i-title">标题</div>
                        <div class="i-info">
                            在任何下拉菜单中均可通过添加标题来标明一组动作。在任何下拉菜单中均可通过添加标题来标明一组动作。在任何下拉菜单中均可通过添加标题来标明一组动作。在任何下拉菜单中均可通过添加标题来标明一组动作。在任何下拉菜单中均可通过添加标题来标明一组动作。
                        </div>
                        <div class="i-cont">
                            <div class="i-example">
                                <div class="example-tag">example</div>
                                <div class="pic"><img src="images/demo-680.jpg" width="680" height="40" alt=""/></div>
                            </div>
                            <div class="i-tab">
                                <ul>
                                    <li><a class="active" id="a1">html</a></li>
                                    <li><a id="a2">css</a></li>
                                    <li><a id="a3">js</a></li>
                                </ul>
                            </div>
                            <div class="i-code">
                                <div class="codearea">123</div>
                            </div>
                            <div class="i-btn"><a href="#" class="btn btn-blue">复制代码</a> <a href="#"
                                                                                            class="btn">运行代码</a></div>
                        </div>
                    </div>
                    <div class="widget-item">
                        <div class="i-title">标题</div>
                        <div class="i-info">
                            在任何下拉菜单中均可通过添加标题来标明一组动作。在任何下拉菜单中均可通过添加标题来标明一组动作。在任何下拉菜单中均可通过添加标题来标明一组动作。在任何下拉菜单中均可通过添加标题来标明一组动作。在任何下拉菜单中均可通过添加标题来标明一组动作。
                        </div>
                        <div class="i-cont">
                            <div class="i-example">
                                <div class="example-tag">example</div>
                                <div class="pic"><img src="images/demo-680.jpg" width="680" height="40" alt=""/></div>
                            </div>
                            <div class="i-tab">
                                <ul>
                                    <li><a class="active" id="a1">html</a></li>
                                    <li><a id="a2">css</a></li>
                                    <li><a id="a3">js</a></li>
                                </ul>
                            </div>
                            <div class="i-code">
                                <div class="codearea">123</div>
                            </div>
                            <div class="i-btn"><a href="#" class="btn btn-blue">复制代码</a> <a href="#"
                                                                                            class="btn">运行代码</a></div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </dd>
        </dl>
    </div>
</div>
<div class="footer">
    <div class="inner">
        <ul class="f-link">
            <li class="f-logo"><a href="#"><i></i></a></li>
            <li>
                <p><b>关于</b></p>
                <p><a href="#">关于我们</a></p>
                <p><a href="#">关于平台</a></p>
            </li>
            <li>
                <p><b>帮助</b></p>
                <p><a href="#">如何开始</a></p>
                <p><a href="#">视觉规范</a></p>
                <p><a href="#">FAQ</a></p>
                </p>
            </li>
            <li>
                <p><b>互动</b></p>
                <p><a href="#">意见反馈</a></p>
                <p><a href="#">我要投稿</a></p>
            </li>
            <li>
                <p><b>联系</b></p>
                <p>hi群：72353455 </p>
                <p>邮箱：freeue@baidu.com</p>
            </li>
            <div class="clear"></div>
        </ul>
    </div>
    <div class="f-copyright">&copy;2016 QEC & QAUP 版权所有</div>
</div>
</body>
</html>
